<!-- @format -->

<template>
    <a-collapse :default-active-key="['1']">
        <a-collapse-item :header="customTranslate('General')" key="1">
            <BasicAttr :element="element"></BasicAttr>
        </a-collapse-item>
        <a-collapse-item :header="customTranslate('Documentation')" key="2">
            <Documentation :element="element"></Documentation>
        </a-collapse-item>
        <a-collapse-item :header="customTranslate('Execution Listeners')" key="3">
            <ExcutedListener :element="element"></ExcutedListener>
        </a-collapse-item>
        <a-collapse-item :header="customTranslate('Asynchronous Continuations')" key="4">
            <AsynchronousContinuations :element="element"></AsynchronousContinuations>
        </a-collapse-item>
    </a-collapse>
</template>

<script>
import { inject } from "vue";
import BasicAttr from '../attrs/General.vue'
import ExcutedListener from '../attrs/ExcutedListener.vue'
import Documentation from '../attrs/Documentation.vue'
import AsynchronousContinuations from '../attrs/AsynchronousContinuations.vue'
import customTranslate from "../../translate/customTranslate";

export default {
    name: 'EndPanel',
    props: ["element"],
    components: { BasicAttr, ExcutedListener, Documentation, AsynchronousContinuations },
    data() {
        return {
        };
    },
    setup() {
        const bpmnModeler = inject("bpmnModeler");
        return {
            bpmnModeler,
            customTranslate
        };
    },
}
</script>

<style lang="scss" scoped>

</style>
